<div class="p-6">
  <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
    <div class="min-w-0 flex-1">
      <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">Firewall Rules</h3>
    </div>
  </div>

  <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
    <table class="min-w-full divide-y divide-gray-300">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">CIDR</th>
          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Description</th>
          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Port Range</th>
          <% if @edit_perm %>
          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"></th>
          <% end %>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white">
        <% @pg.firewall_rules.each do |fwr| %>
        <tr class="group/inline-editable">
          <td class="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 inline-editable">
            <div class="inline-editable-text group-[.active]/inline-editable:hidden block"><%= fwr.cidr %></div>
            <%== part("components/form/text", name: "cidr", attributes: {required: true}, extra_class: "inline-editable-input group-[.active]/inline-editable:block hidden") %>
          </td>
          <td class="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 inline-editable">
            <div class="inline-editable-text group-[.active]/inline-editable:hidden block"><%= fwr.description %></div>
            <%== part("components/form/text", name: "description", extra_class: "inline-editable-input group-[.active]/inline-editable:block hidden") %>
          </td>
          <td class="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">5432, 6432</td>
          <% if @edit_perm %>
          <td id="fwr-buttons-<%= fwr.ubid %>" class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 flex gap-2 items-center justify-end">
            <%== part("components/inline_edit_buttons", url: "#{@project_data[:path]}#{@pg.path}/firewall-rule/#{fwr.ubid}", confirmation_message: "Firewall rule is updated successfully.") %>
            <div class="group-[.active]/inline-editable:hidden block">
              <%== part("components/delete_button", url: "#{@project_data[:path]}#{@pg.path}/firewall-rule/#{fwr.ubid}", text: "") %>
            </div>
          </td>
          <% end %>
        </tr>
        <% end %>
        <% if @edit_perm %>
        <tr>
          <td class="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
            <%== part("components/form/text", name: "cidr", attributes: { placeholder: "0.0.0.0/0", required: true, form: "form-pg-fwr-create" }) %>
          </td>
          <td class="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
            <%== part("components/form/text", name: "description", attributes: { placeholder: "Description", form: "form-pg-fwr-create" }) %>
          </td>
          <td class="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">5432, 6432</td>
          <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
            <form action="<%= "#{@project_data[:path]}#{@pg.path}/firewall-rule" %>" role="form" method="POST" id="form-pg-fwr-create">
            <%== csrf_tag("#{@project_data[:path]}#{@pg.path}/firewall-rule") %>
            <%== part("components/form/submit_button", text: "Create", extra_class: "firewall-rule-create-button") %>
            </form>
          </td>
        </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>